<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>课程表</title>
    <style>
        h3 {
            text-align: center;
        }

        .content {
            width: 910px;
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
        }

        .content .Left {
            width: 100px;
            height: 450px;
            background-color: #f0f0f0;
        }

        .content .Right {
            width: 800px;
            height: 450px;
            margin-left: 10px;
            background-color: #f0f0f0;
        }

        .Right .top {
            width: 780px;
            height: 250px;
            display: flex;
            justify-content: space-between;
        }

        .Right .top .left {
            width: 40px;
            height: 175px;
            margin-top: 60px;
            margin-left: 5px;
            background-color: gray;
        }

        .Right .top .right table {
            margin-top: 15px;
        }

        .Right .top .right table tr {
            width: 740px;
            height: 40px;
            background-color: #f0f0f0;
        }

        .Right .top .right table tr th {
            width: 100px;
            height: 40px;
            background-color: gray;
            margin: 5px;
            text-align: center;
            /* 水平居中 */
            vertical-align: middle;
            /* 垂直居中 */
        }

        .Right .top .right table tr td {
            width: 100px;
            height: 40px;
            background-color: white;
            text-align: center;
            /* 水平居中 */
            vertical-align: middle;
            /* 垂直居中 */
        }

        .Right .bottom {
            width: 790px;
            height: 250px;
            display: flex;
            justify-content: space-between;
        }

        .Right .bottom .left {
            width: 40px;
            height: 175px;
            margin-left: 5px;
            background-color: gray;
        }

        .Right .bottom .right table {
            margin-right: 10px;
        }

        .Right .bottom .right table tr td {
            width: 100px;
            height: 40px;
            background-color: white;
            text-align: center;
            /* 水平居中 */
            vertical-align: middle;
            /* 垂直居中 */
        }

        .course {
            width: 90px;
            height: 30px;
            cursor: grab;
            margin: 5px;
            text-align: center;
            line-height: 30px;
        }

        /* 新增输入框样式 */
        input {
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }

        input:focus {
            border-color: #4a90e2;
        }

        /* 新增按钮基础样式 */
        button {
            padding: 8px 16px;
            margin-left: 8px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        /* 添加课程按钮样式 */
        button:nth-of-type(1) {
            background-color: #4a90e2;
            color: white;
        }

        button:nth-of-type(1):hover {
            background-color: #357abd;
        }

        /* 一键清空按钮样式 */
        button:nth-of-type(2) {
            background-color: #e74c3c;
            color: white;
        }

        button:nth-of-type(2):hover {
            background-color: #c0392b;
        }

        /* 按钮悬停阴影效果 */
        button:hover {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .return {
            position: fixed;
            right: 50%;
            bottom: 5%;
            display: block;
            width: 100px;
            height: 30px;
            background-color: #e38a0e;
            color: #fff;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }

        /* ... existing code ... */
        .course.small-text {
            font-size: 12px;
            /* 可根据需求调整缩小后的字体大小 */
        }

        td.small-text {
            font-size: 12px;
            /* 可根据需求调整表格单元格缩小后的字体大小 */
        }

        /* 添加媒体查询，适配手机端 */
        @media (max-width: 768px) {
            .content {
                width: 100%;
                flex-direction: column;
            }

            .content .Left {
                width: 100%;
                height: auto;
                display: flex;
                flex-wrap: wrap;
            }

            .course {
                width: calc(33.33% - 10px);
                margin: 5px;
            }

            .content .Right {
                width: 100%;
                margin-left: 0;
                margin-top: 10px;
                height: auto;
            }

            .Right .top,
            .Right .bottom {
                width: 100%;
                height: auto;
                flex-direction: column;
            }

            .Right .top .left,
            .Right .bottom .left {
                width: 100%;
                height: 30px;
                margin: 0;
                line-height: 30px;
                text-align: center;
            }

            .Right .top .right table,
            .Right .bottom .right table {
                width: 100%;
                margin: 0;
            }

            .Right .top .right table tr,
            .Right .top .right table tr th,
            .Right .top .right table tr td,
            .Right .bottom .right table tr td {
                width: calc(100% / 7);
                height: 30px;
                font-size: 12px;
            }

            .return {
                right: 10px;
                bottom: 10px;
            }
        }
    </style>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <h3>课程表</h3>
        <!-- 添加课程输入框和按钮 -->
        <div style="text-align: center; margin-bottom: 20px;">
            <input v-model="courseName" placeholder="输入课程名" />
            <button @click="addCourse">添加课程</button>
            <button @click="clearAll">一键清空</button>
        </div>
        <div class="content">
            <div class="Left" data-drop="move">
                <!-- 使用存储的颜色 -->
                <div v-for="(course, index) in courses" :key="index" class="course"
                    :class="{ 'small-text': course.name.length > 3 }" draggable="true" @dragstart="dragStart(course)"
                    :style="{ backgroundColor: course.color }">
                    {{ course.name }}
                </div>
            </div>
            <div class="Right">
                <div class="top">
                    <div class="left">上午</div>
                    <div class="right">
                        <table>
                            <tr>
                                <th>星期一</th>
                                <th>星期二</th>
                                <th>星期三</th>
                                <th>星期四</th>
                                <th>星期五</th>
                                <th>星期六</th>
                                <th>星期日</th>
                            </tr>
                            <tr v-for="(row, rowIndex) in schedule.morning" :key="rowIndex">
                                <!-- 使用存储的颜色 -->
                                <td v-for="(cell, colIndex) in row" :key="colIndex" data-drop="copy" draggable="true"
                                    @dragover.prevent @drop="drop('morning', rowIndex, colIndex)"
                                    :style="{ backgroundColor: cell ? scheduleColors.morning[rowIndex][colIndex] : 'white' }"
                                    :class="{ 'small-text': cell.length > 3 }">
                                    {{ cell }} </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">下午</div>
                    <div class="right">
                        <table>
                            <tr v-for="(row, rowIndex) in schedule.afternoon" :key="rowIndex">
                                <!-- 使用存储的颜色 -->
                                <td v-for="(cell, colIndex) in row" :key="colIndex" data-drop="copy" draggable="true"
                                    @dragover.prevent @drop="drop('afternoon', rowIndex, colIndex)"
                                    :style="{ backgroundColor: cell ? scheduleColors.afternoon[rowIndex][colIndex] : 'white' }"
                                    :class="{ 'small-text': cell.length > 3 }">
                                    {{ cell }}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <a href="首页.html" class="return">返回</a>
        <script>
            const { createApp } = Vue
            createApp({
                data() {
                    return {
                        courseName: '',
                        // 修改数据结构，每个课程为对象，包含名称和颜色
                        courses: JSON.parse(localStorage.getItem('courses')) || [],
                        schedule: JSON.parse(localStorage.getItem('schedule')) || {
                            morning: Array(4).fill().map(() => Array(7).fill('')),
                            afternoon: Array(4).fill().map(() => Array(7).fill(''))
                        },
                        // 存储课程表每个位置的颜色信息
                        scheduleColors: JSON.parse(localStorage.getItem('scheduleColors')) || {
                            morning: Array(4).fill().map(() => Array(7).fill('')),
                            afternoon: Array(4).fill().map(() => Array(7).fill(''))
                        }
                    }
                },
                mounted() {
                    // 页面加载时从本地存储读取数据
                    this.loadState();
                },
                methods: {
                    addCourse() {
                        const trimmedName = this.courseName.trim();
                        // 定义课程名合法性校验正则，只允许中文，长度 2 - 7
                        const validPattern = /^[\u4e00-\u9fa5]{2,7}$/;
                        if (trimmedName && validPattern.test(trimmedName)) {
                            // 检查课程名是否已存在
                            if (this.courses.some(course => course.name === trimmedName)) {
                                alert('课程名已存在');
                                return;
                            }
                            this.courses.push({
                                name: trimmedName,
                                color: this.getRandomColor()
                            });
                            this.courseName = '';
                            this.saveState();
                        } else {
                            // 给出不合法提示
                            alert('请输入 2 - 7 位纯中文的课程名');
                        }
                    },
                    clearAll() {
                        this.courses = [];
                        // 清空课程表和颜色信息
                        this.schedule = {
                            morning: Array(4).fill().map(() => Array(7).fill('')),
                            afternoon: Array(4).fill().map(() => Array(7).fill(''))
                        };
                        this.scheduleColors = {
                            morning: Array(4).fill().map(() => Array(7).fill('')),
                            afternoon: Array(4).fill().map(() => Array(7).fill(''))
                        };
                        localStorage.removeItem('courses');
                        localStorage.removeItem('schedule');
                        localStorage.removeItem('scheduleColors');
                    },
                    dragStart(course) {
                        // 将课程对象转换为字符串并存储在 dataTransfer 中
                        event.dataTransfer.setData('text/plain', JSON.stringify(course));
                    },
                    drop(time, rowIndex, colIndex) {
                        // 从 dataTransfer 中获取课程对象字符串并解析
                        const courseStr = event.dataTransfer.getData('text/plain');
                        try {
                            const course = JSON.parse(courseStr);
                            this.schedule[time][rowIndex][colIndex] = course.name;
                            this.scheduleColors[time][rowIndex][colIndex] = course.color;
                            this.saveState();
                        } catch (e) {
                            console.error('解析课程数据出错:', e);
                        }
                    },
                    saveState() {
                        localStorage.setItem('courses', JSON.stringify(this.courses));
                        localStorage.setItem('schedule', JSON.stringify(this.schedule));
                        localStorage.setItem('scheduleColors', JSON.stringify(this.scheduleColors));
                    },
                    loadState() {
                        const savedCourses = localStorage.getItem('courses');
                        const savedSchedule = localStorage.getItem('schedule');
                        const savedScheduleColors = localStorage.getItem('scheduleColors');
                        if (savedCourses) {
                            this.courses = JSON.parse(savedCourses);
                        }
                        if (savedSchedule) {
                            this.schedule = JSON.parse(savedSchedule);
                        }
                        if (savedScheduleColors) {
                            this.scheduleColors = JSON.parse(savedScheduleColors);
                        }
                    },
                    // 生成随机颜色的函数
                    getRandomColor() {
                        const letters = '0123456789ABCDEF';
                        let color = '#';
                        for (let i = 0; i < 6; i++) {
                            color += letters[Math.floor(Math.random() * 16)];
                        }
                        return color;
                    }
                }
            }).mount('#app');
        </script>
</body>

</html>